
<!DOCTYPE html>
<html>

<head>
  <title></title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/go.min.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <style type="text/css">
    textarea {
        width: 900px;
      height: 600px;
    }

    div.code {
      white-space: pre;
    }

element.style {
}
.token {
   display: inline-block;
}
.token.attribute{
	color:blue;
}

code[class*=language-], pre[class*=language-] {
    color: #000000;
    font-size: 12px;
    text-shadow: none;
    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 16px;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

    background-origin: black
}

    .token.name{
    	color:red;
    }
     .token.attr{
    	color:green;
    }
     .token.string{
    	color:yellow;
    }
    .token.keyword{
    	color:blue;
    }

.hljs{

  background: #d6d6d6;
    color: #444;

}
.demo--wrapper{
	width: 160px

}
  </style>

  <script type="text/javascript">
    var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;


    function encodeHtml(s) {
      return (typeof s != "string") ? s :
        s.replace(REGX_HTML_ENCODE,
          function ($0) {
            var c = $0.charCodeAt(0), r = ["&#"];
            c = (c == 0x20) ? 0xA0 : c;
            r.push(c); r.push(";");
            return r.join("");
          });
    }




    function render() {

  
      hljs.configure({
        noHighlightRe: /^do-not-highlightme$/i,
       languages:['jsx','html','js'],
        languageDetectRe: /\bgrammar-([\w-]+)\b/i, // for `grammar-swift` style CSS naming
        classPrefix: 'token '     // don't append class prefix
        // … other options aren't changed
      });
      let htm=''

      document.querySelectorAll('pre.code').forEach(el => {
        // then highlight each
     htm+=  hljs.highlightElement(el);
      });



console.log('sssssssss',htm)
      // 	$("#result_div").empty();
      // 	$("#result_div").prepend("<pre>"+encodeHtml($("").val())+"</pre>");
      // 	var class_v="brush :"+$("#code_type").val()+";";
      // 	$("#result_div pre").addClass(class_v);
      // hljs.highlightElement($("#code_source"))
      // 	toHTML();

    }


window.onload=()=>{
	render()
}

  </script>
</head>

<body>

  <div onclick="render();">模型生成代码</div>

  <div id="highlight-wapper">
  
  <pre class="code">

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { Page, Card, Row, Col } from '@alifd/meet-demo-layout';
import { Button } from '@alifd/meet';

    <textarea id='code_source'>
		
	<View class="header clearfix">
  <p>
    <ul class="nav nav-pills pull-left">
      <Button type='normal'>{}</Button>
<Button type='normal'>{}</Button>
<Button type='primary'>{}</Button>
<Button type='normal'>{}</Button>
<Button type='normal'>{}</Button>

    </ul>
  </p>
</View>
		
		</textarea>
		</pre>
  </div>
</div>
 

 <button>导出至本地</button>

 <div class="demo--wrapper">代码预览</div>

 <!-- <iframe src="http://10.12.44.165:3333/home.html" width="100%" height="800px"></iframe> -->
</body>

</html>